import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchProductionDetail, fetchProductionType} from '../../actions/productionAction';
import NavLink from '../NavLink';
class ProductionDetail extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: ""
        };
    }
    componentWillMount() {
        var params = this.props.params.productionId
        this
            .props
            .fetchProductionDetail(params);
            const typeId=this.props.location.state.data;
            this
            .props
            .fetchProductionType(typeId);
    }
    render() {
        //获取新闻详情
        const {productionDetail,productionType} = this.props;
        if (JSON.stringify(productionDetail) != "{}") {

            return (
                <div>
                    <ol className="breadcrumb">
                        <li>
                            <NavLink to='/production'>
                                全部产品
                            </NavLink>
                        </li>
                        <li>
                        <NavLink to='/production'>
                          {productionType.title}
                        </NavLink>
                    </li>
                        <li className="active">当前产品</li>
                    </ol>
                    <hr className="featurette-divider"/>
                    <div className="row featurette">
                        <div className="col-md-7 col-md-push-5">
                            <h2 className="featurette-heading" style={{fontSize:'14x'}}>{productionDetail.name}</h2>
                            <p>卖家:{productionDetail.seller}</p>   
                            <div className=''>
                                <p style={{color:   'red'}}>【11号没抢到？狂欢返场，不错过！】99% 折扣享不停，感受花钱比赚钱更有快感！</p>
                                秒杀价:<p style={{color:'red',fontSize:'16px',fontFamily: 'Verdana'}}><i>￥</i><em style={{fontSize:'20px'}}>{productionDetail.price}</em></p>
                               
                        <button type="button" className="btn btn-danger">加入购物车</button> 
                                
                            </div>
                        </div>
                        <div className="col-md-5 col-md-pull-7">
                            <img
                                className="featurette-image img-responsive center-block"
                                src={`http://localhost:3000/${productionDetail.img.filename}`}
                                alt="Generic placeholder image"/>
                        </div>
                    </div>
                    <hr className="featurette-divider"/>
                    <div
                                dangerouslySetInnerHTML={{
                                __html: productionDetail.description
                            }}></div>
                </div>
            )
        } else {
            return (
                <div>
                            数据正在加载中...请稍等
               </div>
            )
        }

    }
}
const getValue = (state) => {
    return {productionDetail: state.productionReducer.productionDetail,
             productionType:state.productionReducer.productionType
    }
}
const productionDetailContext = connect(getValue, {fetchProductionDetail, fetchProductionType})(ProductionDetail)
module.exports = productionDetailContext;